<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .container {
            height: auto;
            min-height: 100%;
            position: relative;
        }

        .content {
            height: 630px;
            background: #ccc;
        }

        footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            background: rgb(41, 41, 41);
        }
    </style>
</head>

<body>
    <div class="container">
        <div style="padding-bottom: 40px">
            <div class="content">
                <ol>
                    <li>
                        首先将html和body的height设置为100%。将最外层的.container的height设置为auto,min-height设为100%,position设为relative。
                        <p style="color: red;">这里将.container高度设置为auto非常重要，保证了内容超出时自身会被撑开，min-height保证了在内容不足以把自身撑开时，自己的高度会保持与窗口的高度一样</p>
                    </li>
                    <li>
                        .footer的position设为absolute，bottom设为0。
                    </li>
                    <li>
                        这样便可实现保持footer永远在底部了，当中间的内容撑出了滚动条的时候，footer又会随着中间内容的增多自动往下。
                    </li>
                    <p>其实footer是根据最外层的元素来定位的自己的。自己永远在.container的底部。而.container的高度又会跟着内容的多少自动变化，这样保证.footer永远在最下面了</p>
                    <p></p>
                </ol>
                在这里输入中间.content的高度，来观察底部.footer的变化：
                <input type="text" id="value" value="630">
                <p>当前.content高度为: height =
                    <span id="heightNum">630</span>
                </p>
            </div>
        </div>
        <footer></footer>
    </div>
    <script>
        var input = document.getElementById('value'),
            content = document.getElementsByClassName('content')[0],
            heightNum = document.getElementById('heightNum')
        // input.onkeydown = changeValue;
        input.onkeydown = changeValue;
        function changeValue(e) {
            e.keyCode === 38 ? this.value++ : e.keyCode === 40 ? this.value-- : '';
            content.style.height = this.value + 'px';
            heightNum.innerText = this.value;
        }
    </script>
</body>

</html>